<template>
  <div class="no-print">
    <a-card class="info" title="差旅报销单">
      <template slot="extra">
        <!-- <template v-if="model.bpmStatus==='1'">
        <a-button
                class="ruleButton"
                :ghost="true"
                type="primary"
                icon="edit"
                @click="handleEdit(model)"
                :disabled="isDisabledAuth('erpFinanceTravelReimbursementBill:edit')"
        />
        <a-divider type="vertical"/>
        <a-button type="primary" size="small" @click="startProcess(model)" :disabled="isDisabledAuth('erpFinanceTravelReimbursementBill:startProcess')">发起流程</a-button>
      </template>
      <template v-if="showBtn(model.bpmStatus)&& doCount > 0">
        <span v-if="model.taskUrge">
          <a-icon title="催办提醒" theme="twoTone" twoToneColor="#eb2f96"
                  @click="taskNotifyMe(flowCode,model.id)" type="notification"/>
          <a-divider type="vertical"/>
        </span>

        <a-button type="primary" size="small" @click="handleProcess(model)">办理</a-button>
        <a-divider type="vertical"/>
      </template>
      <template v-if="myCount > 0 && showBtn(model.bpmStatus)">
        <a-button type="primary" size="small" @click="taskNotify(flowCode,model.id)">催办</a-button>
        <a-divider type="vertical"/>
        <a-popconfirm title="确定要作废吗?" @confirm="() => invalidProcess(model)">
          <a-button type="primary" size="small" :disabled="isDisabledAuth('erpFinanceTravelReimbursementBill:invalidProcess')">
            作废流程
          </a-button>
        </a-popconfirm>
        <a-divider type="vertical"/>
      </template> -->
        <template v-if="model.bpmStatus !== '1'">
          <a-button type="primary" size="small" @click="handleTrack(model)" :disabled="isDisabledAuth('erpFinanceTravelReimbursementBill:viewTrack')">审批进度</a-button>
        </template>
      </template>
      <!-- <biz-his-task-module ref="bizHisTask" :formData="formData"> -->
      <a-row type="flex" justify="center">
        <a-col :span="24">
          <erp-finance-travel-reimbursement-bill-form ref="realForm" :detail="true" :disabled="true" normal></erp-finance-travel-reimbursement-bill-form>
        </a-col>
      </a-row>
      <a-row type="flex" justify="center">
        <a-col :span="24">
          <a-collapse v-model="activeKey">
            <a-collapse-panel key="1" header="处理信息" >
              <a-row :gutter="48">
                <!-- <a-col :span="24">
              <a-form-model-item label="挂起原因" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="onSuspendRemarks">
                <a-textarea  v-model="model.onSuspendRemarks" disabled rows="4" placeholder="请输入挂起原因" />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="反挂起原因" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="onSuspendRemarks">
                <a-textarea  v-model="model.unSuspendRemarks" disabled rows="4" placeholder="请输入反挂起原因" />
              </a-form-model-item>
            </a-col> -->
                <a-col :span="8">
                  <a-form-model-item label="付款金额(元)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="paymentAmount">
                    <a-input-number
                      :max="99999999"
                      :min="0"
                      v-model="model.paymentAmount"
                      placeholder="请输入付款金额"
                      style="width: 100%"
                      disabled/>
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="付款人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="payHandlerId">
                    <select-user-by-dep
                      v-model="model.payHandlerId"
                      placeholder="请选择付款人"
                      disabled/>
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="付款时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="payTime">
                    <j-date
                      placeholder="请选择付款时间"
                      v-model="model.payTime"
                      :show-time="true"
                      date-format="YYYY-MM-DD HH:mm:ss"
                      style="width: 100%"
                      disabled/>
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-collapse-panel>
          </a-collapse>
          <!-- 流程历史跟踪 -->
          <common-flow-list v-if="model.bpmStatus !== '1'" :formData="formData"></common-flow-list>
        </a-col>
      </a-row>
      <!-- </biz-his-task-module> -->
      <erp-finance-travel-reimbursement-bill-modal ref="modalForm" @ok="modalFormOk"></erp-finance-travel-reimbursement-bill-modal>

      <bpm-biz-task-deal-modal
        ref="taskDealModal"
        :path="path"
        :formData="formData"
        @ok="handleOk"></bpm-biz-task-deal-modal>
      <bpm-process-track-modal ref="bpmProcessTrackModal"></bpm-process-track-modal>
      <biz-task-notify-modal ref="taskNotifyModal"></biz-task-notify-modal>
      <biz-task-notify-me-modal ref="taskNotifyMeModal"></biz-task-notify-me-modal>
    </a-card>

    <div style="text-align: center;margin-top: 15px;" >
      <a-button type="primary" v-print="'#printContent'">打印</a-button>
    </div>
    <ErpFinanceTravelReimbursementBillFormPrint class="print_style" id="printContent" :detail="true" :formData="model" :formDataHistory="formData"></ErpFinanceTravelReimbursementBillFormPrint>

  </div>
</template>

<script>

  import { getAction, postAction } from '@/api/manage'
  import { JeecgBpmListMixin } from '@/mixins/JeecgBpmListMixin'
  import BizHisTaskModule from '@/views/modules/bpmbiz/common/BizHisTaskModule.vue';
  import BpmBizTaskDealModal from '@/views/modules/bpmbiz/common/BpmBizTaskDealModal.vue';
  import BpmProcessTrackModal from '@/views/modules/bpmbiz/common/BpmProcessTrackModal.vue';
  import BizTaskNotifyModal from '@/views/modules/bpmbiz/common/BizTaskNotifyModal.vue';
  import BizTaskNotifyMeModal from '@/views/modules/bpmbiz/common/BizTaskNotifyMeModal.vue';
  import ErpFinanceTravelReimbursementBillForm from './modules/ErpFinanceTravelReimbursementBillForm'
  import ErpFinanceTravelReimbursementBillFormPrint from './modules/ErpFinanceTravelReimbursementBillFormPrint'
  import ErpFinanceTravelReimbursementBillModal from './modules/ErpFinanceTravelReimbursementBillModal'
  import { DisabledAuthFilterMixin } from '@/mixins/DisabledAuthFilterMixin'
  import SelectUserByDep from '@/views/scy/components/SelectUserByDep'
  import CommonFlowList from '@/views/components/CommonFlowList.vue'; // 审批历史流程列表
  import Print from '@/utils/print/printarea.js';

  export default {
    name: 'ErpFinanceTravelReimbursementBillDetail',
    mixins: [JeecgBpmListMixin, DisabledAuthFilterMixin],
    components: {
     ErpFinanceTravelReimbursementBillForm,
     ErpFinanceTravelReimbursementBillModal,
     BizHisTaskModule,
     BpmBizTaskDealModal,
     BpmProcessTrackModal,
     BizTaskNotifyModal,
     BizTaskNotifyMeModal,
     SelectUserByDep,
     CommonFlowList,
     ErpFinanceTravelReimbursementBillFormPrint
    },
    data () {
      return {
        timer: null,
        labelCol: {
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 24 }
        },
        activeKey: ['1'],
        model: {},
        id: '',
        url: {
          queryById: '/api/erp/finance/travel/erpFinanceTravelReimbursementBill/queryById',
          delete: '/api/erp/finance/travel/erpFinanceTravelReimbursementBill/delete',
          bizCount: '/api/erp/finance/travel/erpFinanceTravelReimbursementBill/bizCount'
        },
        confirmLoading: false,
        iconStyle: { 'font-size': '20px' },
        // 代码生成后需手动设置流程编码
        flowCode: 'onl_erp_finance_travel_reimbursement_bill',
        formUrl: '/erp/finance/travel/modules/ErpFinanceTravelReimbursementBillForm',
        formUrlMobile: ''
      }
    },
    created() {
    },
    watch: {
      $route(to, from) {
        this.loadData();
      }
    },
    mounted() {
    },
    methods: {
      loadData() {
        const id = this.$route.params.id;
        getAction(this.url.queryById, { id }).then((res) => {
          if (res.success) {
            const model = res.result
            this.$refs.realForm.edit(model);
            this.model = model;
            if (model.settleType == 2) {
              if (model.paymentAmount > 0) {
                this.$set(this.model, 'paymentAmount', model.paymentAmount);
              } else {
                this.$set(this.model, 'paymentAmount', 0);
              }
            } else {
              this.$set(this.model, 'paymentAmount', model.reimbursementAmount);
            }
            // 查询催办
            let params1 = { flowCode: this.flowCode, dataId: id };// 查询条件
            getAction(this.url.checkNotify, params1).then((res2) => {
              if (res2.result) {
                this.model.taskUrge = true;
              }
            })
            // 查询流程
            let params = { flowCode: this.flowCode, dataId: this.model.id };// 查询条件 
            this.viewTrack(params);
          }
        })
        this.bizCountById(id);
      }
    }
  }
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';

.info {
  /deep/ .ant-card-head-title{
    flex: none;
    margin-right: 20px;
  }
  /deep/ .ant-card-extra{
    flex: 1;
    float: left;
  }
}
.print_style{
  position: absolute;
  top: 0;
  z-index: -1111;
}
</style>
<style>
@import "../../../../utils/print.css";
</style>
